<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="track/view-track-production.html">
<link rel="import" href="track/view-track-performance.html">
<link rel="import" href="track/view-track-warehouse.html">
<link rel="import" href="view-app.html">
<link rel="import" href="style/shared-styles.html">
<dom-module id="view-track">
  <script>
    /**
     * @ViewTrack
     * @polymer 
     * @extends {Polymer.Element}
     */
    class ViewTrack extends Polymer.mixinBehaviors([Polymer.AppLocalizeBehavior],
      Polymer.Element) {
      static get is() {
        return 'view-track'
      }

      static get template() {
        return Polymer.html`
            <style include="shared-styles">
              :host {
                display: block;
              }
            </style>
            <app-localstorage-document key="app-lang" data="{{language}}"></app-localstorage-document>
            <app-header id="subheader" slot="header" shadow>
              <paper-tabs selected="{{tabs}}" attr-for-selected="name" role="navigation" autoselect noink>
                <template is="dom-repeat" items="[[submenus]]">
                  <paper-tab link role="tab" name$="[[item.view]]" disabled="[[item.disable]]">
                    <a href="app/track/[[item.view]]" tabindex="-1">
                      <paper-icon-button icon="[[item.icon]]" alt="[[item.title]]"></paper-icon-button>
                      <span class="tab-title">{{localize(item.title)}}</span>
                    </a>
                  </paper-tab>
                </template>
              </paper-tabs>
            </app-header>
            <iron-pages selected="[[tabs]]" attr-for-selected="name" selected-attribute="visible" fallback-selection="404">
              <view-track-production name="production"></view-track-production>
              <view-track-performance name="performance"></view-track-performance>
              <view-track-warehouse name="warehouse"></view-track-warehouse>
            </iron-pages>
        `
      }

      static get properties() {
        return {
          route: Object,
          language: String,
          tabs: {
            type: String,
            reflectToAttribute: true,
            value: 'production',
            observer: '_tabsChanged'
          },
          submenus: {
            type: Array,
            value: () => {
              return [{
                "title": "production",
                "view": "production",
                "icon": "vaadin:progressbar"
              },
              {
                "title": "warehouse",
                "view": "warehouse",
                "icon": "vaadin:storage"
              }
              // {
              //   "title": "performance",
              //   "view": "performance",
              //   "icon": "vaadin:stopwatch"
              // }
              ]
            }
          }
        }
      }

      _tabsChanged(tabs) {
        let resolvedTabsUrl = this.resolveUrl('track/view-track-' + tabs + '.html')
        Polymer.importHref(resolvedTabsUrl, null, null, true)
      }
      connectedCallback() {
        super.connectedCallback()
        this.loadResources(this.resolveUrl('../data/locales.json'))
      }
    }
    window.customElements.define(ViewTrack.is, ViewTrack)
  </script>
</dom-module>